<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Marked } from 'marked';
import { markedHighlight } from 'marked-highlight';
import hljs from 'highlight.js';
//引入markdown样式
import 'highlight.js/styles/atom-one-dark.css';

const markdownContent = ref();
const marked = new Marked(
   markedHighlight({
      langPrefix: 'hljs language-',
      highlight(code, lang) {
         const language = hljs.getLanguage(lang) ? lang : 'shell';
         return hljs.highlight(code, { language }).value;
      },
   })
);
marked.Renderer.prototype.heading = function ({ text }: { text: string }) {
   return `<h4 style="font-weight: bold;">${text}</h4>`;
};

function getMarkdownContent() {
   fetch('/src/views/html5Module/html5知识点.md')
      .then((response) => response.text())
      .then((text) => {
         markdownContent.value = marked.parse(text);
      })
      .catch((error) => {
         console.error('Error fetching markdown content:', error);
      });
}

onMounted(() => {
   getMarkdownContent();
});
</script>

<template>
   <div class="markdown-content" v-html="markdownContent"></div>
</template>

<style lang="scss" scoped>
.markdown-content {
   background: $global-card-bg-color;
   text-align: left;
   padding: $global-padding;
   font-weight: bold !important;
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
      font-weight: bold !important;
   }
}
</style>
